<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>梦想书写家</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/list.css">

<!--    首先引入 jQuery-->
    <script type="text/javascript" src="js/jquery.min.js"></script>

<!--    然后引入其他-->
    <script type="text/javascript" src="js/bootstrap.min.js"></script>

<!--    只引入其中一个即可-->
    <script src="js/jq-paginator.js"></script>
<!--    <script src="js/jqPaginator.min.js"></script>-->

    <script src="js/common.js"></script>

    <!-- 新增 editor.md 的依赖 -->
    <link rel="stylesheet" href="blog-editormd/css/editormd.css" />
    <script src="blog-editormd/lib/marked.min.js"></script>
    <script src="blog-editormd/lib/prettify.min.js"></script>
    <script src="blog-editormd/editormd.js"></script>


</head>

<body>
<div class="nav">
    <img src="pic/logo2.jpg" alt="">
    <div class="blog-title">梦想书写家</div>
    <div class="space"></div>
    <a class="nav-span" href="blog_list.html">主页</a>
    <a class="nav-span" href="blog_edit.html">写博客</a>
    <a class="nav-span" href="#" onclick="logout()">退出登录</a>
</div>

<div class="container">
    <div class="left">
        <div class="card">
            <img class="pic" src="pic/doge.jpg" alt="">
            <h3></h3>
            <a href="#">GitHub 地址</a>
            <div class="row">
                <span>总篇数</span>
                <span>总人数</span>
            </div>
            <div class="row">
                <span class="sum"></span>
                <span class="count"></span>
            </div>
        </div>
    </div>
    <div class = "rightDiv">
        <div class="right">


        </div>
        <div class="demo">
            <ul  id="pageContainer" class="pagination justify-content-center"></ul>
        </div>
    </div>
</div>


<script>
    getBlogList();
    function getBlogList() {
        $.ajax({
            type: "get",
            url: "/blog/getListByPage"+ location.search ,
            // data: {
            //     currentPage: currentPage,
            //     pageSize: 10 // 假设每页显示10条记录，你可以根据实际情况修改这个值
            // },
            success: function (result) {
                console.log(result.code);
                //if else 自己补充
                if (result != null && result.code == 200 && result.data != null) {
                    let finalHtml = "";
                    for (var blog of result.data.records) {
                        finalHtml += '<div class="blog">';
                        finalHtml += '<div class="title">' + blog.title + '</div>';
                        finalHtml += '<div class="date">' + blog.updateTime + '</div>';
                        // 假设最大长度为100个字符
                        var maxLength = 100;

                        // 获取blog.content的文本内容
                        var content = blog.content;

                        //
                        var truncatedContent = content.length > maxLength ? content.substring(0, maxLength) + '...' : content;

                        // 创建空容器
                        finalHtml += '<div class="desc" id="md-content-' + blog.id + '" style="background-color: inherit;"></div>';
                        // finalHtml += '<div class="desc" id="md-content-' + blog.id + '" ></div>';
                        finalHtml += '<a class="detail" href="blog_detail.html?blogId=' + blog.id + '">查看全文&gt;&gt;</a>';
                        finalHtml += '</div>';

                        // 统一处理截断并渲染
                        for (let blog of result.data.records) {
                            const maxLength = 50;
                            // 检查内容长度并截断（如果需要）
                            const truncatedContent =
                                blog.content.length > maxLength
                                    ? blog.content.substring(0, maxLength) + '...'
                                    : blog.content;
                            // 将截断后的内容添加到HTML中
                            editormd.markdownToHTML("md-content-" + blog.id, {
                                markdown: truncatedContent,
                                htmlDecode: true, // 解析 HTML 标签
                                // 可选：限制渲染后的 HTML 高度
                                emoji: false,
                                taskList: false,
                                tex: false,
                                flowChart: false,
                                sequenceDiagram: false
                            });
                        }
                    }
                    $(".right").html(finalHtml);

                    // 渲染所有 Markdown 内容
                    for (let blog of result.data.records) {
                        editormd.markdownToHTML("md-content-" + blog.id, {
                            markdown: blog.content.substring(0, 50) + (blog.content.length > 50 ? "..." : ""),
                            htmlDecode: true, // 允许解析 HTML 标签
                        });
                    }
                }

                // 非空检验省略...
                var currentPage = result.data.request.currentPage;
                // var currentPage = 1;
                //翻页信息
                console.log("下面展示分页: {}" , result.data.request);
                $("#pageContainer").jqPaginator({
                    totalCounts: result.data.total, //总记录数
                    // totalCounts: 20, //总记录数
                    // pageSize: 10,    //每页的个数
                    pageSize: result.data.request.pageSize,    //每页的个数
                    visiblePages: 5, //可视页数
                    currentPage: result.data.request.currentPage,  //当前页码
                    // currentPage: 1,  //当前页码
                    first: '<li class="page-item"><a class="page-link">首页</a></li>',
                    prev: '<li class="page-item"><a class="page-link" href="javascript:void(0);">上一页<\/a><\/li>',
                    next: '<li class="page-item"><a class="page-link" href="javascript:void(0);">下一页<\/a><\/li>',
                    last: '<li class="page-item"><a class="page-link" href="javascript:void(0);">最后一页<\/a><\/li>',
                    page: '<li class="page-item"><a class="page-link" href="javascript:void(0);">{{page}}<\/a><\/li>',

                    //页面初始化和页码点击时都会执行
                    onPageChange: function (page, type) {
                        console.log("第" + page + "页, 类型:" + type);
                        console.log("得到的返回页数：", page);

                        if(type=="change"){
                            location.href= "blog_list.html?currentPage=" + page;
                        }
                    }
                });

            }
        });
    }

    //获取用户信息
    let url = "/user/getUserInfo?userId=" + localStorage.getItem("login_user_id");
    getUserInfo(url);

</script>
</body>

</html>

